import 'package:country_code_picker/country_code_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vape_xe/routes/app_pages.dart';
import 'package:vape_xe/services/services.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/values/values.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class SignInView extends GetView<SignInController> {
  const SignInView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            160.hGap,
            Padding(
              padding: EdgeInsets.only(left: 32.w),
              child: Text(
                'Welcome back!'.tr,
                style: TextStyle(fontSize: 28.sp, fontWeight: FontWeight.bold),
              ),
            ),
            GestureDetector(
              onTap: () => controller.signInWithGoogle(),
              child: Container(
                height: 56.h,
                margin: EdgeInsets.only(left: 32.w, top: 34.h, right: 32.w),
                decoration: BoxDecoration(
                  borderRadius: 8.radius,
                  border: Border.all(color: Colors.white60, width: 0.5.w),
                ),
                child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  Image.asset(
                    'assets/images/ic_signin_google.webp',
                    width: 20.w,
                    height: 20.w,
                  ),
                  12.vGap,
                  Text('Sign in with Google'.tr),
                ]),
              ),
            ),
            24.hGap,
            Center(
              child: Text(
                'or'.tr,
                style: const TextStyle(color: Color(0xFFC4C4C4)),
              ),
            ),
            24.hGap,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              child: TabBar(
                tabs: controller.tabTitles.map((e) => Tab(text: e)).toList(),
                controller: controller.tabController,
                indicatorColor: AppColors.primaryText,
                indicatorPadding: EdgeInsets.symmetric(vertical: 8.h),

                /// 下面不要横线
                dividerHeight: 0,

                /// labelStyle里面设置color还无效
                unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
                labelStyle: const TextStyle(fontWeight: FontWeight.bold),
                labelColor: AppColors.primaryText,
                unselectedLabelColor: AppColors.secondaryText,
              ),
            ),
            16.hGap,
            InnerContainerWidget(
              child: Obx(
                () => Row(
                  children: [
                    if (controller.isPhone)
                      Row(
                        children: [
                          CountryCodePicker(
                            enabled: true,
                            initialSelection: '+${ConfigStore.to.countryCode}',
                            showCountryOnly: false,
                            showOnlyCountryWhenClosed: false,
                            alignLeft: false,
                            dialogBackgroundColor: Colors.black,
                            closeIcon: const Icon(Icons.close, color: Colors.white),
                            hideSearch: true,
                            padding: EdgeInsets.zero,
                            showFlag: false,
                            showFlagDialog: true,
                            textStyle: TextStyle(fontSize: 14.sp, color: Colors.white, fontWeight: FontWeight.bold),
                            onChanged: (country) {
                              controller.dialCode = country.dialCode ?? '';
                            },
                          ),
                          Container(
                            width: 1.w,
                            height: 12.h,
                            color: Colors.white10,
                          ),
                        ],
                      ),
                    16.vGap,
                    Expanded(
                      child: TextField(
                        keyboardType: controller.isPhone ? TextInputType.number : TextInputType.emailAddress,
                        controller: controller.accountController,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: controller.isPhone ? 'Phone number'.tr : 'Email'.tr,
                          hintStyle: TextStyle(color: Colors.white54, fontSize: 14.sp, fontWeight: FontWeight.bold),
                        ),
                        style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            36.hGap,
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Password'.tr,
                    style: const TextStyle(
                      color: AppColors.secondaryText,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  GestureDetector(
                    onTap: () => Get.toNamed(Routes.FORGET),
                    child: Text(
                      'Forgot?'.tr,
                      style: const TextStyle(
                        color: AppColors.secondaryText,
                        fontWeight: FontWeight.bold,
                        // 下划线
                        decoration: TextDecoration.underline,
                        // 下划线厚度
                        decorationThickness: 2.0,
                        // 下划线颜色
                        decorationColor: AppColors.secondaryText,
                        // 下划线样式
                        decorationStyle: TextDecorationStyle.solid,
                      ),
                    ),
                  )
                ],
              ),
            ),
            16.hGap,
            InnerContainerWidget(
              child: Obx(
                () => Padding(
                  padding: EdgeInsets.only(left: 16.w),
                  child: TextField(
                    controller: controller.passwordController,
                    obscureText: controller.isObscured,
                    onChanged: (value) {
                      controller.hasText = value.isNotEmpty;
                    },
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Password'.tr,
                      contentPadding: EdgeInsets.symmetric(vertical: 16.h),
                      hintStyle: TextStyle(color: Colors.white54, fontSize: 14.sp, fontWeight: FontWeight.bold),
                      suffixIcon: controller.hasText
                          ? IconButton(
                              icon: Icon(
                                controller.isObscured ? Icons.visibility_off : Icons.visibility,
                                color: Colors.white54,
                              ),
                              onPressed: () {
                                controller.isObscured = !controller.isObscured;
                              },
                            )
                          : null,
                    ),
                    style: TextStyle(color: Colors.white, fontSize: 14.sp, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            36.hGap,
            GestureDetector(
              onTap: () => controller.signIn(),
              child: Container(
                height: 52.h,
                margin: EdgeInsets.symmetric(horizontal: 32.w),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(colors: [Color(0xff6EDEF7), Color(0xff3351EF)]),
                  borderRadius: 100.radius,
                ),
                child: Center(
                  child: Text(
                    'Sign in'.tr,
                    style: const TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            20.hGap,
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Don’t have an account?'.tr, style: TextStyle(fontSize: 12.sp)),
                4.vGap,
                GestureDetector(
                  onTap: () => Get.toNamed(Routes.SIGN_UP),
                  child: Text('Sign up'.tr,
                      style: TextStyle(
                        fontSize: 12.sp,
                        // 下划线
                        decoration: TextDecoration.underline,
                        // 下划线厚度
                        decorationThickness: 2.0,
                        // 下划线颜色
                        decorationColor: AppColors.primaryText,
                        // 下划线样式
                        decorationStyle: TextDecorationStyle.solid,
                      )),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}
